import React, { Component } from 'react'
import './index.css'
import { nanoid } from 'nanoid'
import PropTypes from 'prop-types'

export default class Header extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }
    handleKeyUp = (event) => {
        if(event.keyCode !== 13) return
        const taskName = event.target.value
        if(taskName.trim() === '') {
            alert('输入不能为空')
            return
        }
        this.props.addTodo({
            id: nanoid(),
            name: taskName,
            done: false
        })
    }

    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        )
    }
}
